<template>
  <div>
    <el-card>
      <el-form inline>
        <el-form-item label="搜索关键词:" class="mgb-0">
          <el-input v-model="keywords"></el-input>
        </el-form-item>
        <el-form-item label="开始时间:" class="mgb-0">
          <el-date-picker
            v-model="starttime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间:" class="mgb-0">
          <el-date-picker
            v-model="endtime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="mgb-0">
          <el-button type="primary" icon="el-icon-search" @click="searchData"></el-button>
          <el-button type="success" icon="el-icon-refresh" @click="clearSearch"></el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px">
      <el-table border :data="dataList" v-loading="tableLoading">
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column label="流程名称" prop="processName" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="申请人" prop="applyUserName" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="办理人或角色" prop="approveProcess" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="任务节点" prop="taskTitle" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="开始时间" prop="startTime" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="办完时间" prop="endTime" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="用时" prop="duration" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center" width="272">
          <template slot-scope="scope">
            <el-button type="text" @click="openHandle(scope.row.processInstanceId)">流程信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float:right; margin: 10px 0;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[10, 15, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        prev-text="上一页"
        next-text="下一页"
        :total="total">
      </el-pagination>
    </el-card>
    <!--    办理弹窗-->
    <handle v-if="isShowHandle"
            :processInstanceId="processInstanceId"
            detail
            @close="closeHandle"></handle>
  </div>
</template>

<script>
  import DoneToTaskApi from '@/api/taskManage/DoneToTaskApi'
  export default {
    name: 'doneToTask',
    components:{
      handle: () => import('./components/handle'),
    },
    data(){
      return{
        keywords:'', //
        starttime:'', //
        endtime:'', //
        tableLoading:false,
        type:'',
        leaveTypeList:[],
        dataList:[],
        pageNo: 1, //当前页面
        pageSize: 10, // 当前页数
        total: 0, // 总条数
        isShowDelegate:false,
        flowData:{},
        isShowHandle:false,
        processInstanceId:'',
      }
    },
    created(){
      this.getData()
    },
    methods: {
      //获取表格数据源
      getData() {
        this.tableLoading = true
        let data = {
          keywords: this.keywords,
          starttime: this.starttime,
          endtime: this.endtime,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
        }
        this.getTableListData(new DoneToTaskApi(), data, 'doneList').then(res => {
          this.dataList = res.dataList
          this.pageNo = res.pageNo
          this.pageSize = res.pageSize
          this.total = res.total
          this.tableLoading = false
        })
      },
      // 当前页码修改时
      handleCurrentChange(pageNo) {
        this.pageNo = pageNo
        this.getData()
      },
      // 当前页数修改时
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.getData()
      },
      //搜索
      searchData() {
        this.pageNo = 1
        this.getData()
      },
      //清空搜索
      clearSearch() {
        this.keywords = ''
        this.starttime = ''
        this.endtime = ''
      },
      //办理
      openHandle(id){
        this.processInstanceId = id
        this.isShowHandle = true
      },
      //关闭办理
      closeHandle(){
        this.processInstanceId = ''
        this.isShowHandle = false
      },
    }
  }
</script>

<style scoped>

</style>

